iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0

<padding>屬於css中的屬性,主要控制內容與其邊距之間的距離

主要分成四個方向,上、下、左、右,去設置內邊距
top: 上方內邊距
bottom: 下方內邊距
left: 左邊內邊距
right: 右邊內邊距

https://ithelp.ithome.com.tw/upload/images/20240920/20168468U3sUi1yMWM.png
未調整前是這樣
https://ithelp.ithome.com.tw/upload/images/20240920/20168468oT82Gh6TSF.png

以下為根據padding做不同的調整

調整上方內邊距

padding-top: 50px;

調整後會發現上方的內邊距變大了
https://ithelp.ithome.com.tw/upload/images/20240920/20168468k1DtgYC5aM.png

調整下方內邊距

padding-bottom: 20px;

https://ithelp.ithome.com.tw/upload/images/20240920/201684689d2UqZ5xtB.png

調整左邊內邊距

padding-left: 30px;

https://ithelp.ithome.com.tw/upload/images/20240920/20168468aCkN5y1cDf.png

調整右邊內邊距

padding-right: 30x;

https://ithelp.ithome.com.tw/upload/images/20240920/201684685uwvsaSvbg.png

看完以上的邊距調整後,會發現有明顯變化的應該是padding-toppadding-left,這兩種在之後寫網頁時也會經常使用到,除了padding內邊距之外,還有margin外部邊距,如果也想了解margin的話,就繼續看下一篇吧~~/images/emoticon/emoticon69.gif


上一篇
Day12.<button>按鈕元素
下一篇
Day14.CSS<margin>標籤
系列文
Web前端的探索:30天的驚奇之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言